<template>
  <div class="edit-container">
    <el-form v-loading="formLoading" ref="form" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="客服选择" prop="futureCustomerId">
        <el-select v-model="form.bid" placeholder="请选择">
          <el-option
              v-for="item in customerList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button v-loading="saveLoading" element-loading-background="rgba(0, 0, 0, 0.3)" type="primary"
                   @click="handlerSubmit" v-has-permi="['admin:merchantActivities:save']">确定
        </el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {getForm} from "@/utils/utils";
import {detail, customerList, moveFromAtoB} from "@/api/exclusiveService";

export default {
  components: {},
  props: {
    businessId: {
      default: null
    },
    customerId: {
      default: null
    }
  },
  data() {
    return {
      form: {
        bid: '',
        aid: '',
        businessId: ''
      },
      rules: {
        bid: [{required: true, message: '请选择客服', trigger: ['blur']}],
      },
      roles: [],
      saveLoading: false,
      formLoading: false,
      uploads: {
        show: false,
        multiple: false,
      },
      customerList: [],
      imageUrl: '',
    }
  },
  mounted() {
    this.imageUrl = process.env.VUE_APP_IMAGE_URL
    this.getCustomerList();
    if (this.id) {
      this.getDetail();
    }
  },
  methods: {
    getCustomerList() {
      customerList().then(res => {
        this.customerList = res
      })
    },
    getDetail() {
      this.formLoading = true
      detail(this.id).then(res => {
        getForm(res, this.form);
      }).finally(() => {
        this.formLoading = false;
      })
    },
    handlerSubmit() {
      if (this.saveLoading || this.formLoading) {
        return;
      }
      this.$refs.form.validate(valid => {
        if (!valid) return;
        this.saveLoading = true;
        this.form.businessId = this.businessId;
        this.form.aid = this.customerId;
        moveFromAtoB(this.form.aid,this.form.bid,this.form.businessId,).then(() => {
          this.$message.success('更改成功');
          this.close();
        }).finally(() => {
          this.saveLoading = false
        })
      })
    },
    close() {
      this.$emit('hideEditDialog')
    }
  }
}
</script>
<style lang="scss" scoped>

.col {
  width: 520px;
}

.img {
  width: 120px;
  height: 120px;
  margin-right: 10px;
}
</style>
